<script setup lang="ts">
import type { Env } from "@/stores/master/types";
import { NDynamicInput, NInput, NInputGroup, NSelect } from "naive-ui";
import type { PropType } from "vue";

const props = defineProps({
  getInherit: Function,
} as {
  value: PropType<Env[]>;
  getInherit: PropType<(key: string) => string | undefined>;
});

function createEnv(): Env {
  return { key: "", type: "custom", custom: "" };
}
</script>

<template>
  <NDynamicInput :on-create="createEnv" show-sort-button>
    <template #default="{ value }: { value: Env }">
      <NInputGroup>
        <NInput v-model:value="value.key" />
        <NSelect
          style="width: 250px"
          v-model:value="value.type"
          :options="[
            { label: '继承', value: 'inherit' },
            { label: '自定义', value: 'custom' },
          ]"
        />
        <NInput
          v-if="value.type === 'inherit'"
          :value="props.getInherit?.(value.key)"
          disabled
        />
        <NInput
          v-else-if="value.type === 'custom'"
          v-model:value="value.custom"
        />
      </NInputGroup>
    </template>
  </NDynamicInput>
</template>
